<template>
  <view class="container">
    <!-- 头部 -->
    <navbar @openleft="openleft" />
    <!-- 轮播图 -->
    <view class="swiper-linner">
      <image class="rotateImg img-cover" src="/static/images/scale.png" alt="" @click="to3dpage" />
      <!-- <uv-swiper :list="bannerList" height="382rpx" indicator indicatorMode="line" circular></uv-swiper> -->
      <iframe @click="openBlank" :src="panoramic_link?panoramic_link:'https://www.720yun.com/vr/60fj5dwazk2'"
        style="width: 100%;height: 600rpx;border: none;"></iframe>
    </view>
    <view class="downer"></view>
    <!-- 公司介绍 -->
    <view class="componey">
      <view class="componey-title">
        {{$i18n.t('companyIntro')}}
      </view>
      <view class="componey-desc">
        {{ company_profile.editor }}
      </view>
      <image class="componey-image" :src="company_profile.image" mode=""></image>
    </view>
    <view class="downer"></view>
    <!-- 企业文化 -->
    <view class="componey">
      <view class="tabs">
        <view class="tab-item" :class="currentIndex == index?'active':''" @click="setIndex(index)"
          v-for="(item, index) in corporate_culture" :key="index">
          {{item.name}}
        </view>
      </view>
      <view class="componey-desc" v-if="corporate_culture[currentIndex]">
        <uv-parse :content="corporate_culture[currentIndex].content"></uv-parse>
      </view>
      <!-- <image class="componey-image" src="" mode=""></image> -->
    </view>
    <view class="downer"></view>
    <!-- 发展历程 -->
    <view class="componey">
      <view class="componey-title">
        {{$i18n.t('devHistory')}}
      </view>
      <view class="componey-desc">
        {{ development_history.editor }}
      </view>
      <image class="componey-image" :src="development_history.image" mode=""></image>
    </view>
    <view class="downer"></view>
    <!-- 合作客户 -->
    <view class="componey">
      <view class="componey-title">
        {{$i18n.t('Partners')}}
      </view>
      <view class="customer-warpper">
        <view class="customer-warpper-item" v-for="(item, index) in customerList" :key="index">
          <image class="avatar" :src="item.avatar" mode=""></image>
          <view class="linner">
            <view class="linner-name">{{item.user_name}}</view>
            <view class="linner-desc text-twoline-ellipsis">{{item.textarea}}</view>
          </view>
        </view>
      </view>
    </view>
    <!-- footer -->
    <foot />
    <!-- 左侧组件 -->
    <leftnavbar :currentIndex="0" @jump="jump" ref="children" />
    <!-- 联系组件 -->
    <connect />
  </view>
</template>

<script>
  import reqApi from "../../api/api.js";
  export default {
    data() {
      return {
        currentIndex: 0,
        menuActiveIndex: 0,
        company_profile: {}, //公司介绍
        development_history: {}, //发展历程
        corporate_culture: [], //企业文化
        bannerList: [], //banner图
        customerList: [], //意向客户
        panoramic_link: ""
      }
    },
    onLoad() {
      this.getData();
      this.getBannerData();
    },
    methods: {
      getData() {
        reqApi.companyInfo({}).then((res) => {
          console.log("关于我们", res);
          this.company_profile = res.data.company_profile;
          this.development_history = res.data.development_history;
          this.corporate_culture = res.data.corporate_culture;
          this.customerList = res.data.customer;
          this.panoramic_link = res.data.panoramic_link;
        });
      },
      getBannerData() {
        reqApi.bannerData({
          type: "opt0"
        }).then((res) => {
          console.log("轮播图", res);
          this.bannerList = res.data.map(v => v.image);
        });
      },
      jump(path) {
        console.log("path", path);
        uni.navigateTo({
          url: path
        })
      },
      setIndex(index) {
        this.currentIndex = index;
      },
      openleft() {
        this.$refs.children.open();
      },
      to3dpage(){
        console.log("点击3d");
        window.open(this.panoramic_link, "_blank");
      }
    }
  }
</script>

<style lang="scss" scoped>
  .customer-warpper {
    .customer-warpper-item:last-child {
      border-bottom: 0 !important;
      margin-bottom: 0 !important;
    }

    .customer-warpper-item {
      border-bottom: 2rpx solid #eee;
      display: flex;
      padding-bottom: 20rpx;
      margin-bottom: 20rpx;

      .avatar {
        width: 120rpx;
        height: 120rpx;
        border-radius: 12rpx;
        box-sizing: border-box;
        margin-right: 20px;
      }

      .linner {
        flex: 1;
        display: flex;
        flex-direction: column;
        justify-content: space-around;

        .linner-name {
          font-weight: bold;
          font-size: 28rpx;
          color: #333333;
        }

        .linner-desc {
          font-weight: 400;
          font-size: 24rpx;
          color: #666666;
        }
      }
    }
  }

  .active {
    background: #104682 !important;
    color: #fff !important;
  }

  .tabs {
    display: flex;
    margin-bottom: 40rpx;

    .tab-item {
      width: 148rpx;
      height: 72rpx;
      border-radius: 12rpx 12rpx 12rpx 12rpx;
      border: 2rpx solid rgba(16, 70, 130, 0.3);
      font-weight: 400;
      font-size: 28rpx;
      color: #104682;
      text-align: center;
      line-height: 72rpx;
      margin-right: 20rpx;
    }

    .tab-item:last-child {
      margin-right: 0 !important;
    }
  }

  .container {
    .swiper-linner {
      padding: 20rpx 10rpx;
      box-sizing: border-box;
      background: #fff;
      position: relative;

      .rotateImg {
        width: 48rpx;
        height: 48rpx;
        position: absolute;
        right: 30rpx;
        top: 40rpx;
        z-index: 100;
        opacity: 0;
        background: red;
      }
    }

    .componey {
      padding: 40rpx;
      box-sizing: border-box;
      background: #fff;

      .componey-title {
        font-weight: 600;
        font-size: 32rpx;
        color: #333333;
        margin-bottom: 30rpx;
      }

      .componey-desc {
        font-weight: 400;
        font-size: 24rpx;
        color: #666666;
        margin-bottom: 30rpx;
      }

      .componey-image {
        width: 670rpx;
        height: 320rpx;
        border-radius: 20rpx;
      }
    }
  }
</style>